<template>
  <div class="dialog-wrapper">
    <Modal v-model="show" v-bind:title="$t('m.remarkDetail')" footer-hide width="50%" :mask-closable="false">
      <div class="remark-body">
        <template v-if="remarkList">
          <Timeline class="dialog_remark_table">
            <table class="table table-hover table-condensed" border>
              <thead>
                <tr>
                  <td>{{$t('m.bzsj')}}</td>
                  <td>{{$t('m.bzry')}}</td>
                  <td>{{$t('m.bznr')}}</td>
                </tr>
              </thead>
              <tr v-for="item in remarkList" class="identifyList" :dataid="item.id">
                <td>{{item.ctime}}</td>
                <td>{{item.accountName}}</td>
                <td>{{item.remark}}</td>
              </tr>
            </table>
          </Timeline>
        </template>
        <Form class="dialog_remark" ref="form" :model="form" :rules="rules">
          <FormItem v-bind:label="$t('m.inputRemark')" prop="remark">
            <Input type="textarea" :autosize="{minRows: 5}" v-model="form.remark" />
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit">{{$t('m.addRemark')}}</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<script>
import { deepCopy } from '@/libs/util';
import { dateFormat } from '@/static/tools';
const COMPONENT_NAME = 'dialog-remark';
export default {
  name: COMPONENT_NAME,
  props: {
    value: { type: Boolean },
    RemarkData: {
      default:''
    }
  },
  data () {
    return {
      btnLoading: false,
      show: this.value,
      remarkList: [],
      form: {
        remark: ''
      },
      rules: {
        remark: [
          { required: true, message: this.$t('m.qǐngshūrùyàobèizhùdenèiróng'), trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    value (val) {
      this.show = val;
      if (val) { this.getCollectionRemarks(); }
    },
    show (val) {
      this.$refs.form.resetFields();
      this.$emit('input', val);
    }
  },
  methods: {
    dateFormatted (timestamp) {
      return dateFormat(timestamp, 'year');
    },
    // 获取催收日志
    getCollectionRemarks () {
      var url1 = '/api/laocai/operation/activeAllot/remark/loadByUserId?userId=' + this.RemarkData 
      this.$http.get(url1, {
      }).then((response) => {

        if (response.body.code === 0) {
          this.remarkList = response.body.result;
          console.log(this.remarkList)
        } else if (response.body.code === 2) {

          this.$Message.success(response.body.message);
          // alert(response.body.message)
        }
      }, error => { });
    },
    // 表单提交
    handleSubmit () {
          // debugger
      const { form } = this.$refs;
      form.validate(valid => {
        if (valid) {
          const { managerId } = this.form;
          this.btnLoading = true;
          this.$http.post('/api/laocai/operation/activeAllot/remark/save', {
            userId: this.RemarkData,
            remark: this.form.remark
          }).then((res) => {
            console.log(res)
            if (res.body.code == 0) {
              this.show = false;
              this.$emit('ok');
            }
            this.$Message.success(this.$t('m.errorCode' + res.body.code));
            this.btnLoading = false;
          }, error => { });
        }
      })
    }
  }
}
</script>

<style lang="scss">
.dialog_remark {
  width: 85%;
  margin: 0 auto;
}
.dialog_remark_table {
  margin-bottom: 15px;
}
</style>
